<template>
    <div class="subBuy" id="subBuy">
        <!-- 收货地址box -->
        <div class="address-box">
            <!-- 根据用户有无地址判断 -->
            <div class="no" v-if="!isAddrss && lang=='zh' ">
                <i></i>
                <p @click="addAddress">还没有收货地址，<span>点击添加</span></p>
            </div>
            <div class="no en" v-if="!isAddrss && lang=='en' ">
                <i></i>
                <p   @click="addAddress">No delivery address，<span>Click to add</span></p>
            </div>
            <div class="yes" v-if="isAddrss"  @click="changeAddress" >
                <!-- 图标 -->
                <i></i>
                <!-- 地址信息 -->
                <dl>
                    <dt>{{addrssData.name}} &nbsp;&nbsp; {{addrssData.mobile}} &nbsp;&nbsp; 
                         <img v-if="addrssData.is_default==1" class="label" src="http://img.xianyufanshen.net//goods/image/morendizhi@2x.png" alt="">
                    </dt>
                    <dd>{{addrssData.province}}{{addrssData.city}}{{addrssData.district}}{{addrssData.address}}</dd>
                </dl>
            </div>
        </div>
        <img style="width:100%;float:left" src="http://img.xianyufanshen.net//goods/image/dizhitiao@2x.png" alt="">
        <!-- 确认信息 -->
        <div class="info-box">
            <img v-if=" lang=='zh' " src="http://img.xianyufanshen.net//goods/image/querenxinxi@2x.png" alt="" >
            <img  v-else src="http://img.xianyufanshen.net//image/jpg/engquerenxinxi_eng22@2x.png" alt="" >
            <div class="goods-box">
                <div class="img-box">
                    <img :src="data.head_img" alt="">
                    <img v-if="orderType == 2" class="label" src="http://img.xianyufanshen.net//goods/image/huanjin@2x.png" alt="">
                </div>
                <dl>
                    <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{data.title}}</dt>
                    <dd>￥{{data.price}} <span>x{{purchaseNum}}</span></dd>
                </dl>
            </div>
            <div class="handle-box" v-if="orderType == 2">
                <!--没选择商品之前 点击事件 -->
                <div class="click-box" @click="selectGoods" v-if="!isSelected && salesData.length<=0">
                    <span>*</span> <i v-if="lang=='zh' " >选择置换的藏品</i>  <i v-else>Choosing a replacement</i>
                    <img class="arow" src="http://img.xianyufanshen.net//goods/image/jiantou_tijiaoxinxi@2x.png" alt="">
                </div>
                <!-- 选择商品之后 -->
                <div class="selected" v-if="isSelected && salesData.length>0">
                    <img  src="http://img.xianyufanshen.net//goods/image/zhihuan@2x.png" alt="">
                </div>
            </div>
            <!-- 自己换出的商品 -->
            <div class="sales-box" v-if="orderType == 2 && isSelected && salesData.length>0">
                <div class="goods-box sold-box" v-for="(item,index) in salesData" :key="index">
                    <div class="img-box">
                        <img :src="item.head_img" alt="">
                        <img class="label" src="http://img.xianyufanshen.net//goods/image/huanchu@2x.png" alt="">
                    </div>
                    <dl>
                        <dt>{{item.title}}</dt>
                        <dd>￥{{item.price}} <span>x{{item.num}}</span></dd>
                    </dl>
                 </div>
            </div>
           
        </div>
        <!-- 支付金额 -->
        <div class="payMoney">
            <p  v-if=" lang=='zh' "><img src="http://img.xianyufanshen.net//goods/image/zhifujine@2x.png" alt=""></p>
            <p v-else><img class="en" src="http://img.xianyufanshen.net//image/jpg/eng11020181026162351.png"></p>
            <!-- bottom -->
            <div class="bottom">
                <p v-if="lang=='zh' ">保证金</p>
                <p v-else>Margin</p>
                <p>￥{{totalPrice}}</p>
            </div>
        </div>
         <!-- 选择支付方式 -->
        <div class="choosePay">
            <div class="choosePay-txt">
                <img v-if="lang=='zh' " src="http://img.xianyufanshen.net//goods/image/xuanzezhifufangshi@2x.png" alt="">
                <img v-else class="en" src="http://img.xianyufanshen.net//image/jpg/eng110zhifufangshi_eng@2x.png">
            </div>
            <van-radio-group v-model="radio">
                 <van-cell-group>
                    <div class="relative borderbtm">
                        <img class="choosePay-icon choosePay-wechat" src="http://img.xianyufanshen.net//goods/image/weixinzhifu@2x.png" alt="">
                        <van-cell v-if="lang=='zh' " title="微信支付" clickable @click="radio = '2'">
                            <van-radio name="2" />
                        </van-cell>
                        <van-cell v-else title="WeChat" clickable @click="radio = '2'">
                            <van-radio name="2" />
                        </van-cell>
                    </div>
                    <div class="relative borderbtm">
                        <img class="choosePay-icon choosePay-ali" src="http://img.xianyufanshen.net//goods/image/zhifubaozhifu@2x.png" alt="">
                        <van-cell v-if="lang=='zh' " title="支付宝支付" clickable @click="radio = '1'">
                            <van-radio name="1" />
                        </van-cell>
                         <van-cell v-else title="Alipay" clickable @click="radio = '1'">
                            <van-radio name="1" />
                        </van-cell>
                    </div>      
                    <div class="relative">
                        <img class="choosePay-icon choosePay-yue" src="http://img.xianyufanshen.net//goods/image/wodeyue@2x.png" alt="">
                        <van-cell :title="myBalance" clickable @click="radio = '3'">
                            <van-radio name="3" />
                        </van-cell>
                    </div>              
                </van-cell-group>
            </van-radio-group>
        </div>
        <!-- 法律声明 -->
        <div class="TERMS">
            <input type="checkbox" class="checkbox" :class="{active:state}" @click="CheckItem" v-model="state" />
            <span class="txt" v-if="lang=='zh'">我已同意<i @click="showLaw">《法律声明》</i></span>
            <span class="txt" v-if="lang=='en'">I have agreed<i @click="showLaw">《Legal Notices》</i></span>
        </div>
        <!-- 优惠买单按钮 -->
        <div class="btn-box">
            <i v-if="lang=='zh' ">实际支付：</i> <i v-else>Total price：</i> <span>￥{{totalPrice}}</span>
            <div v-if="lang=='zh' " class="btn" @click="submit">立即支付</div>
            <div v-else class="btn" @click="submit">pay immediately</div>
        </div>
        <!-- 法律声明 -->
        <!-- <van-popup v-model="isShowPop" v-html="content"></van-popup> -->
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import {getAccountInfo,getMyAddress} from '@/api/my/userInfo'
import {getBondFee,getLawSay,} from '@/api/public'
import { postBond , getGoodsDetails ,postBalancePay,postCreateExchangeOrder,postCreatepurchaseOrder} from '@/api/goods';
import { Loading,Toast,Cell, CellGroup ,RadioGroup, Radio,Dialog,Checkbox, CheckboxGroup,Popup  } from 'vant';

export default {
    name:'subBuy',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Radio.name]:Radio,
        [RadioGroup.name]:RadioGroup,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Toast.name]:Toast,
        [Dialog.name]:Dialog,
        [Checkbox.name]:Checkbox,
        [CheckboxGroup.name]:CheckboxGroup,
        [Popup.name]:Popup,
     
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           id:0,//当前商品id
           orderType:1,//选择商品类型 1购买 2 置换
           userId:0,//用户id 
           isAddrss:true,//用户是否有收货地址
           data:{},//从服务器接收的数据
           addrssData:{},//地址数据
           idx:0,//地址数据下标，默认第一个
           radio:'2',//支付方式:1支付宝，2微信，3余额
           purchaseNum:'',//购买商品数量
           balance:0,//我的余额
           myBalance:'我的余额',//我的余额描述
           totalPrice:0,//购买的总价格
           loading:false,//加载提示框 是否显示(页面初始加载显示)
           isSelected:false,//是否选择了置换的商品
           salesData:[],//选择售卖的商品数据
           state:true,//复选框是否选中
         
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
            //获得法律声明
            this.getLawSay();
        }
        //获得用户地址下标
        if(this.$route.query.idx) {
            this.idx = this.$route.query.idx;
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
             this.getUserInfo();
             //获得保证金
             this.getBondFee();
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
        //获取type
        this.orderType = this.$route.query.orderType;//根据type判断是购买还是置换
        //获得是否选择
        if(this.$route.query.isSelected) {
            this.isSelected = this.$route.query.isSelected;
        }
        if(this.orderType ==2 && this.isSelected){//置换

            this.salesData = JSON.parse(window.localStorage.getItem("selectedData"));
            console.log(this.salesData,"salesData");
        }
        //购买数量
        if(this.$route.query.purchaseNum && this.$route.query.purchaseNum>0){
             this.purchaseNum = this.$route.query.purchaseNum;
              //把购买数量存储在缓存
             window.localStorage.setItem("purchaseNum",this.purchaseNum);
        }else{
            this.purchaseNum = window.localStorage.getItem("purchaseNum");
        }
        //获取商品id
        if(this.$route.query.id && this.$route.query.id > 0){
            this.id = this.$route.query.id;
             //请求数据
             this.getAllData();
        }else{
            Toast('获得商品ID失败，请返回列表页重试'); 
            this.loading = false;
        }
       
        //是否选择了换出山沟
        if(this.$route.query.isSelected){
             this.isSelected = this.$route.query.isSelected;
        }
       
    },
    //
    methods:{
        //获得法律声明
        getLawSay(){
             getLawSay(this.lang).then(res => {
                // console.log(res);
                if(res.code == 200){
                   this.content = res.data;
                }
            });
        },
        //获得用户信息
        getUserInfo(){
            getAccountInfo(this.userId).then(res => {
                console.log(res);
                if(res.code == 200){
                    this.balance = parseFloat(res.data.balance);//钱包余额
                    this.balance =  this.balance.toFixed(2);//钱包余额
                    // console.log(this.balance);
                    if(this.lang == 'zh'){
                        this.myBalance = '我的余额  (剩余￥'+this.balance+')';
                    }else{
                        this.myBalance = 'My balance  (lave'+this.balance+')';
                    }
                }
            });
            getMyAddress(this.userId).then(res => {
                console.log(res);
                if(res.code == 200){
                  let data = res.data;  
                  //判断该用户是否有地址
                  if(data.length>0){//有地址
                      this.isAddrss = true;
                     
                    this.addrssData = data[this.idx];//取第一个默认地址
                     
                    console.log(this.addrssData);
                  }else{
                      this.isAddrss = false;
                  }
                }
            });
        },
        //获得保证金
        getBondFee(){
            getBondFee().then(res => {
                // console.log(res,'this.data');
                if(res.code == 200){
                    this.totalPrice = res.data;
                }else {
                    Toast('获取失败，请刷新~');
                }
            }); 
        },
        //获得所有详情数据
        getAllData(){
            getGoodsDetails(this.userId,this.id,this.lang).then(res => {
            // console.log(res,'this.data');
            if(res.code == 200){
                this.data = res.data;
                this.loading = false;
            }else {
                Toast('获取详情失败，请稍后再试~');
            }
            }); 
        },
        //跳转到添加地址页面
        addAddress(){
            console.log("添加地址");
            //  this.$router.push({path: '/noAddress', query: {id:this.id,orderType:this.orderType,lang:this.lang,userId:this.userId}});
            let para = {};
             if(this.lang == 'zh'){
                para.title = "收货地址";
            }else{
                para.title = "Shipping address";
            }
            para.url = "/addressList?lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType;
            this.interaction.hLink(para);
        },
        //跳转到选择地址页面
        changeAddress(){
            console.log("切换地址");
            //   this.$router.push({path: '/addressList', query: {id:this.id,orderType:this.orderType,lang:this.lang,userId:this.userId}});
            let para = {};
            if(this.lang == 'zh'){
                para.title = "收货地址";
            }else{
                para.title = "Shipping address";
            }
            para.url = "/addressList?lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType;
            console.log(para);
            this.interaction.hLink(para);
        },
       //提交购买（置换） 立即支付
        submit(){
            //判断有没有地址
            if(!this.isAddrss){
                if(this.lang == 'zh'){
                    Toast("请先添加收货地址！");
                }else{
                    Toast("Please add the address first");
                }
                return false; 
            }else 
            //先判断有没有同意法律声明
            if(!this.state){//没同意
                if(this.lang == 'zh'){
                    Toast("请先确认同意律声明！");
                }else{
                    Toast("Please confirm the Legal Notices first");
                }  
                return false; 
            }else{
            //选择余额的时候判断是否足够    
            if(this.radio == 3){//余额
                if(Number(this.balance) > Number(this.totalPrice)){//余额足够 且 发起支付
                    console.log(this.balance);
                    if(this.orderType == 2 && this.salesData.length <=0){//置换且没选择商品
                        if(this.lang == 'zh'){
                            Toast("请先选择你用来置换的藏品！");
                        }else{
                            Toast("Please select the collection you want to replace first!");
                        }
                        return false;
                    }else if(this.orderType == 2 && this.salesData.length >0){
                        //置换且选择了换出商品
                         //弹窗提示是否确认使用余额支付
                            var message = '';
                            var ok = '确认';
                            var cancel = '取消';
                            if(this.lang == 'zh'){
                                message = '确定使用余额支付？';
                            }else{
                                message = 'Determine the use of balance payment?';
                                 ok = 'cnfirm';
                                cancel = 'cancel';
                            }
                            Dialog.confirm({
                                title: '',
                                message: message,
                                confirmButtonText:ok,
                                cancelButtonText:cancel,
                            }).then(() => {
                            //on confirm
                                //首先创建订单
                                let param ={};
                                param.userId =  parseInt(this.userId);
                                param.addressId = parseInt(this.addrssData.id);
                                param.goodsId = parseInt(this.id);//置换的商品ID（对方的）
                                param.goodsNum = parseInt(this.purchaseNum);//置换的数量（对方的）
                                param.lang = this.lang;
                                param.myGoods = [];
                                for(let i =0;i<this.salesData.length;i++){
                                    var _goods = {};
                                    _goods.goodsId = this.salesData[i].id;
                                    _goods.num = this.salesData[i].num;
                                    param.myGoods[i] = _goods;
                                }
                                param.myGoods = JSON.stringify(param.myGoods);
                                console.log(this.salesData,param,"param")
                                postCreateExchangeOrder(param).then( res => {
                                    if(res.code == 200){
                                        let param = {};
                                        param.userId = this.userId;
                                        param.orderCode = res.data.buyerBondCode;//订单编号  支付保证金订单编号
                                        //调用余额支付
                                        postBalancePay(param).then(res => {
                                            if(res.code == 200){
                                                //跳转到支付成功页面 
                                                    let params = {};
                                                    let title = '';
                                                    if(this.lang == 'zh')
                                                        title = '支付成功';
                                                    else
                                                        title = 'Pay Success'
                                                    params.title = title;//必须参数
                                                    params.url = "/paySuccess?type=2&userId="+this.userId+"&lang="+this.lang; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等  type=1购买，2置换 3、发布藏品
                                                    this.interaction.hLink(params);
                                            }else {
                                                if(this.lang == 'zh')
                                                    Toast('支付失败，请稍后再试~');
                                                else
                                                    Toast('Payment failed. Please try again later~');
                                                    //跳转到支付失败页面 
                                                let params = {};
                                                let title = '';
                                                if(this.lang == 'zh')
                                                    title = '支付失败';
                                                else
                                                    title = 'Pay Fail'
                                                params.title = title;//必须参数
                                                //支付失败：6申请关闭交易  7支付失败
                                                params.url = "/payFail?type=2&userId="+this.userId+"&lang="+this.lang+"&id="+res.data.orderId; 
                                                this.interaction.hLink(params);
                                            }
                                        }); 
                                    }else{
                                        Toast(res.msg);
                                    }
                                });
                            }).catch(() => {
                            // on cancel
                            });
                    }else if(this.orderType == 1 ){
                        //购买  支付保证金
                        //弹窗提示是否确认使用余额支付
                        var message = '';
                        var ok = '确认';
                        var cancel = '取消';
                        if(this.lang == 'zh'){
                            message = '确定使用余额支付？';
                        }else{
                            message = 'Determine the use of balance payment?';
                            ok = 'cnfirm';
                            cancel = 'cancel';
                        }
                        Dialog.confirm({
                            title: '',
                            message: message,
                            confirmButtonText:ok,
                            cancelButtonText:cancel,
                        }).then(() => {
                        // on confirm
                            //首先创建订单
                            let param ={};
                            param.userId = this.userId;
                            param.goodsId = this.id;//购买的商品ID（对方的）                       
                            param.purchaseNum = this.purchaseNum;//购买的数量（对方的）
                            param.addressId = this.addrssData.id;
                            param.lang = this.lang;
                            postCreatepurchaseOrder(param).then( res => {
                                //创建订单
                                if(res.code == 200){
                                    let param = {};
                                    param.userId = this.userId;
                                    param.orderCode = res.data.buyerBondCode;//订单编号   支付保证金编号
                                    //调用余额支付
                                    postBalancePay(param).then(res => {
                                        if(res.code == 200){
                                            //跳转到支付成功页面 
                                            console.log(res.msg,res.data,"余额支付成功")
                                                let params = {};
                                                let title = '';
                                                if(this.lang == 'zh')
                                                    title = '支付成功';
                                                else
                                                    title = 'Pay Success'
                                                params.title = title;//必须参数
                                                //支付成功：type=6保证金；type=7藏品金额；type=8确认收货
                                                params.url = "/paySuccess?type=1&lang="+this.lang+"&userId="+this.userId; //必须参数 后面需要拼接h5所需参数，如:lang=zh,等等  type=1购买，2置换 3、发布藏品
                                                this.interaction.hLink(params);
                                        }else {
                                            if(this.lang == 'zh')
                                                Toast('支付失败，请稍后再试~');
                                            else
                                                Toast('Payment failed. Please try again later~');
                                            //跳转到支付失败页面 
                                            let params = {};
                                            let title = '';
                                            if(this.lang == 'zh')
                                                title = '支付失败';
                                            else
                                                title = 'Pay Fail'
                                            params.title = title;//必须参数
                                            //支付失败：6申请关闭交易  7支付失败
                                            params.url = "/payFail?type=1&userId="+this.userId+"&lang="+this.lang+"&id="+res.data.orderId; 
                                            this.interaction.hLink(params);
                                        }
                                    }); 
                                }else{
                                    Toast(res.msg);
                                }
                            });
                        }).then(() => {
                        //on cancel
                        })   
                    }   
                }else{
                    //余额不足
                    if(this.lang == 'zh'){
                        Toast("余额不足，请选择其他支付方式");
                    }else{
                        Toast("balance is not enough"); 
                    }
                    return false;
                }
            }else{//非余额支付
                if(this.orderType == 2 && this.salesData.length <=0){//置换且没选择商品
                    if(this.lang == 'zh'){
                            Toast("请先选择你用来置换的藏品！");
                    }else{
                        Toast("Please select the collection you want to replace first!");
                    }
                    return false;
                }else{
                    if(this.orderType == 1){
                        //购买订单
                        //首先创建订单
                        let param ={};
                        param.userId = this.userId;
                        param.goodsId = this.id;//购买的商品ID（对方的）                       
                        param.purchaseNum = this.purchaseNum;//购买的数量（对方的）
                        param.addressId = this.addrssData.id;
                        param.lang = this.lang;
                        postCreatepurchaseOrder(param).then( res => {
                            if(res.code == 200){
                                let para ={};
                                para.payType = this.radio;//支付方式
                                para.userId = this.userId;
                                //支付订单类型  1藏品购买，2藏品置换 3、发布藏品支付 4订单置换支付 5 订单购买支付 6 我的置换订单支付 7  我的购买订单支付
                                para.orderType = 1;
                                para.orderCode = res.data.buyerBondCode;//订单编号  保证金订单编号
                                para.id = res.data.orderId; //订单ID
                                //原生支付方法
                                this.interaction.hPay(para);
                            }else{
                                Toast(res.msg);
                            }
                        });
                    } else{
                        //置换订单
                        //首先创建订单
                        let param ={};
                        param.userId =  parseInt(this.userId);
                        param.addressId = parseInt(this.addrssData.id);
                        param.goodsId = parseInt(this.id);//置换的商品ID（对方的）
                        param.goodsNum = parseInt(this.purchaseNum);//置换的数量（对方的）
                        param.lang = this.lang;
                        param.myGoods = [];
                        for(let i =0;i<this.salesData.length;i++){
                            var _goods = {};
                            _goods.goodsId = this.salesData[i].id;
                            _goods.num = this.salesData[i].num;
                            param.myGoods[i] = _goods;
                        }
                        param.myGoods = JSON.stringify(param.myGoods);
                        console.log(this.salesData,param,"param")
                        postCreateExchangeOrder(param).then( res => {
                            if(res.code == 200){
                                let param = {};
                                param.payType = this.radio;//支付方式
                                param.userId = this.userId;
                                param.orderCode = res.data.buyerBondCode;//订单编号  支付保证金订单编号
                                param.id = res.data.orderId; //订单ID
                                param.orderType = 2;
                                //原生支付方法
                                this.interaction.hPay(param);
                            }else{
                                Toast(res.msg);
                            }
                        });
                    }
                }    
            }  
            }
        },
        //跳转到选择置换商品页面
        selectGoods(){
            // this.$router.push({path: '/select', query: {id:this.id,orderType:this.orderType,lang:this.lang,userId:this.userId}});
            let para = {};
            if(this.lang == 'zh'){
                para.title = "选择藏品";
            }else{
                para.title = "Selection";
            }
            para.url = "/select?lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType="+this.orderType;
            this.interaction.hLink(para);
        },
        //法律声明选中
        CheckItem(){
            this.state = !this.state;
        }, 
        //显示法律声明
        showLaw(){
            //跳转到法律声明
            let para = {};
            if(this.lang == 'zh'){
                para.title = "法律声明";
            }else{
                para.title = "Legal Notices";
            }
            para.url = "/law?lang="+this.lang+"&userId="+this.userId;
            console.log(para);
            this.interaction.hLink(para);
        },
    }
    
}
</script>

<style lang="stylus" scoped>
#subBuy{
    // height:100%;
    padding-bottom: 1.7rem;
    background:#f1f1f1;
}
// 地址
.address-box{
    background-color :#fff;
    // 没有地址
    .no{
        padding :.88rem 23%;
        @media screen  and (max-width:320px){
              padding :.88rem 20%;
        }
        &.en{
            padding :.88rem 19%;
        }
        i{
            width:.373333rem;
            height:.453333rem;
            background :url("http://img.xianyufanshen.net//goods/image/shouhuodizhi@2x.png") no-repeat center;
            background-size :100%;
            display:inline-block;
        }
        p{
            display:inline-block;
            position:relative;
            top:-2px;            
            font-size :14px;
            color :#333;
            span{
                color:#cb9c57;
            }
        }
    } 
    //有地址
    .yes{
        background-color :#fff;
        padding :.266667rem;
        overflow:hidden;
        position:relative;
        i{
            width:.373333rem;
            height:.453333rem;
            background :url("http://img.xianyufanshen.net//goods/image/shouhuodizhi@2x.png") no-repeat center;
            background-size :100%;
            position :absolute;
            left :.266667rem;
            top:50%;
            margin-top :-.226667rem;
        }
        dl{
            float:left;
            margin-left :.613333rem;
            width: 100%;
            dt{
                font-family:PingFangSC-Medium;
                font-size:.373333rem;
                color:#494949;
                line-height :.533333rem;
                position:relative;
                padding-right :.266667rem;
                margin-bottom :.133333rem;
                .label{
                    height :.32rem;
                    width :auto;
                    position :absolute;
                    top :50%;
                    margin-top :-0.16rem;
                }
            }
            dd{
                font-family:PingFangSC-Regular;
                font-size:.32rem;
                color:#9b9b9b;
                line-height :.533333rem;
            }
        }   
    }
}
// 确认信息
.info-box{
    background-color :#fff;
    text-align:center;
    img{
        width :2.96rem;
        height :auto;
        margin .266667rem auto;
    }
    .goods-box{
        background:#fafafa;
        padding :.266667rem;
        overflow:hidden;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                margin :0;
            }
            img.label{
                width :1.093333rem;
                position:absolute;
                left 0;
                top :0;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
               
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    .sold-box{
        margin-top :.133333rem;
    }
    //选择互换商品操作盒子区
    .handle-box{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
      
        line-height:.533333rem;
        text-align:left;
      
        padding: 0 .266667rem;
        .click-box{
            position: relative;
            height :1.066667rem;
            line-height :1.066667rem;
            span{
                color:#eb3148;
            }
            img.arow{
                height :.32rem;
                width :auto;
                position :absolute;
                right :0;
                top: 50%;
                margin-top :-0.16rem;
            }
        }
        .selected{
            text-align :center;
            img{    
                height :.533333rem;
                width :auto;
            }
        }
      
    }
}
// 支付金额
.payMoney{
    background-color :#fff;
    margin-top :.266667rem;
    padding :.266667rem;
    p{
        text-align :center;
        img{
            width: 2.96rem;
            height: auto;
            margin-bottom :.266667rem;
            &.en{
                width: 3.76rem;
            }
        }
    }    
   .bottom{
       overflow :hidden;
       font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        line-height:20px;
       p{
           float:left;
       }
       p:last-child{
           float:right;
           font-family:PingFangSC-Medium;    
             color:#cb9c57;
       }
   }
}
// 选择支付方法
.choosePay{
    margin-top :.266667rem;
    background-color :#ffffff;
    .choosePay-txt{
        text-align :center;
        img{
            width: 3.76rem;
            height: auto;
            margin: 0.266667rem auto;
            &.en{
                width: 4rem;
            }
        }
    } 
    .relative{
        position:relative;
        .van-cell{
            padding-left :1.28rem !important; 
            font-family:PingFangSC-Regular;
            font-size:.346667rem!important;
            color:#494949;
            text-align:left;
        }
        .choosePay-icon{
            top: 50%;
            left: .4rem;
            margin-top: -0.34rem;
            width :.666667rem;
            height :.666667rem;
            position: absolute;
            z-index: 1;
        }
    }
    .borderbtm{
        border-bottom :.026667rem solid #f1f1f1;
    }   
            
}
// 法律声明
.TERMS{
    padding-left :0.4rem;
    margin-top:10px;
    position:relative;
    height:16px;
    line-height :16px;
    .checkbox{
        display:block;
        width:16px;
        height:16px;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        background :url("http://img.xianyufanshen.net//address/image/weixuanzhong_dizhi@2x.png") no-repeat;
        background-size :100%;
        position:absolute; 
        // top:50%;
        // left :0.4rem;
        // margin-top:-8px;
        &.active{
            background :url("http://img.xianyufanshen.net//address/image/xuanzhong_dizhi@2x.png") no-repeat;
            background-size :100%;
            width:16px;
            height:16px;
        }
       
    }
    span.txt{
        display: inline-block;
        height:16px;
        line-height :16px;
        margin-left: 22px;
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#a2a2a2;
        position:relative;
          top: -6px;
        letter-spacing:0.68px;
        i {
            color:#2393fe;
        }
    }
}
// 底部操作按钮
.btn-box{
    position :fixed;
    padding-left :.4rem;
    left 0;
    bottom:0;
    opacity:0.9;
    background:#ffffff;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
    width:100%;
    height :1.306667rem;
    line-height :1.306667rem;
    font-family:PingFangSC-Medium;
    font-size:.373333rem;
    color:#42403b;
    letter-spacing:.005067rem;
    box-sizing :border-box;
    z-index: 999;
    span{
        color:#cb9c57;
        letter-spacing:.006667rem;
        line-height:.533333rem;
    }
    .btn{
        background:#cb9c57;
        width:40%;;
        height :1.306667rem;
        line-height :1.306667rem;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.007733rem;
        text-align:center;
        position :absolute;
        right :0;
        bottom:0;
    }
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
.van-popup{
    width:100%;
    height:100%;
    top:0;
    left:0;
    font-size: 14px;
    box-sizing:border-box;
    padding:10px;
    padding-top:50px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
</style>


